<script setup lang="ts">
import {onMounted, ref} from "vue"
import { useUserStore } from '@/stores'
import { addPlayListService } from '@/apis/playlist'
import { HomeDataService } from '@/apis'
import { Plus } from '@element-plus/icons-vue'

const userStore = useUserStore()

const title = '创建的歌单'

const newPlaylist = ref(null)

const createPlayerInput = ref(null)


onMounted(() => {
  //PlayListData.value.list = userStore.getUserPlayList()
})

const onContextMenu = (event: MouseEvent)=>{
  event.preventDefault()
}

const handleNewPlaylist = () =>{
  onCreatePlaylist()
}

const onContextMenuItem = (event: MouseEvent)=>{
  event.preventDefault()
  event.stopPropagation()
}

const onCreatePlaylist = ()=>{
  if(newPlaylist.value && createPlayerInput.value){

    newPlaylist.value.style="display:block;"
    newPlaylist.value.firstChild.value = getPlayerListNewName()
    newPlaylist.value.firstChild.focus()
  }
}

const getPlayerListNewName = ()=>{

  if(userStore.playLists)
  {
    for(let count = 1; true ; count ++)
    {
      let name = "新建播放列表" + count

      if(userStore.playLists.find((item)=>{
        return item.name === name
      }) === undefined)
      {
        return name
      }
    }
  }


}


const createPlaylist = (e: Event) =>{
  //handleCreatePlaylist(e.target.value)
  if(newPlaylist.value){
    newPlaylist.value.style="display:none;"

  }
}

const handleCreatePlaylist = async (name: String) =>{
  const res = await addPlayListService({name: name, songs:[]})
  const homeData = await HomeDataService()
  userStore.setUserInfo(homeData.data.current_user)
  userStore.setUserPlayList(homeData.data.playlists)
  if(newPlaylist.value){
    newPlaylist.value.style="display:none;"

  }
}


const handleInputKeyDown = (e) =>{
  if(e.key === "Enter")
  {
    handleCreatePlaylist(e.target.value)
  }
}
</script>

<template>
  <div class="player-menu">
    <dl @contextmenu="onContextMenu">
      <dt><span  class="left-dt">{{ title }}</span> <span class="newPlaylist" @click="handleNewPlaylist"><el-icon><Plus /></el-icon></span></dt>
      <dd class="newPlaylist" ref="newPlaylist" style="display: none;"><input ref="createPlayerInput" value="新建列表1" @blur="createPlaylist($event)" @keydown="handleInputKeyDown" /></dd>
      <dd v-for="item in userStore.playLists" :key="item.name" @contextmenu="onContextMenuItem">
        <router-link :to="item.path ? item.path : ''">
          <span>{{ item.name }}</span>
        </router-link>
      </dd>
    </dl>
  </div>
</template>

<style lang="scss" scoped>
.newPlaylist{
  input{
    display: inline-block;
    width: 120px;
    margin-left: 10px;
  }

}


dt {
  width: 200px;
  display: flex;
  justify-content: space-between;

  .left-dt {
    margin-left: 40px;
    display: inline-block;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 320;

  }
  .newPlaylist{
    margin-right: 60px;
    margin-top: 20px;
    margin-bottom: 10px;
    display: inline-block;
  }
}
dd {
  display: inline-block;
  margin-left: 20px;
  /*margin-top: 5px;*/



}

a{
  display: block;
  width: 150px;
  height: 30px;
  /*margin-left: 10px;*/
  text-decoration: none;
  color: black;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 30px;
  border-radius: 5px;

  &:hover{
    background-color: var( --color-bg-hover);
  }

  &.active{
    //background-color: #1ecf9d;
    background: var(--color-bg-active);
    color: white;
  }

  .iconfont{
    margin-right: 8px;
  }

}
</style>